import { Segmented } from 'antd';
import {
  LeftOutlined,
  RightOutlined,
  DoubleRightOutlined,
  DoubleLeftOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';
import styles from './style.less';
import { stringify } from 'uuid';

export type HandleMoveArg = 'prevYear' | 'nextYear' | 'next' | 'prev' | 'today';
export type ViewType = 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay' | 'listWeek';

type Props = {
  segmentValue: string;
  now: Date;
  onMove: (action: HandleMoveArg) => void;
  setSegmentValue: (segmentValue: string) => void;
};

export default function CalendarHeader({ now, onMove, segmentValue, setSegmentValue }: Props) {
  return (
    <div className={styles.containt}>
      <div style={{ width: 220 }} />
      <div className={styles['containt-center']}>
        <div className={styles['icon-lined']} onClick={() => onMove('prevYear')}>
          <DoubleLeftOutlined />
        </div>
        <div className={styles['icon-lined']} onClick={() => onMove('prev')}>
          <LeftOutlined />
        </div>
        <div className={styles['date-title']}>{dayjs(now).format('YYYY年MM月')}</div>
        <div className={styles['icon-lined']} onClick={() => onMove('next')}>
          <RightOutlined />
        </div>
        <div className={styles['icon-lined']} onClick={() => onMove('nextYear')}>
          <DoubleRightOutlined />
        </div>
      </div>
      <div>
        <Segmented
          onChange={(value: any) => {
            setSegmentValue(value);
          }}
          value={segmentValue}
          options={[
            {
              label: '计划',
              value: '1',
            },
            {
              label: '活动-堂食',
              value: '2',
            },
            {
              label: '活动-外送',
              value: '3',
            },
          ]}
        />
      </div>
    </div>
  );
}
